<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title th:text="${article.title}"></title>
    <!-- Font Awesome -->
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- Bootstrap core CSS -->
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet">
    <!-- Material Design Bootstrap -->
    <link href="/css/mdb.css" rel="stylesheet">
    <link href="/css/style.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js"></script>
    <script src="https://cdn.bootcss.com/highlight.js/9.12.0/languages/java.min.js"></script>
    <script src="https://cdn.bootcss.com/highlight.js/9.11.0/languages/yaml.min.js"></script>
    <link href="https://cdn.bootcss.com/highlight.js/9.12.0/styles/atom-one-light.min.css" rel="stylesheet">
</head>

<body class="creative-lp">

<header>

    <!-- 顶部导航 -->
    <nav th:replace="~{common :: nav}"></nav>

    <!-- 文章配图 -->
    <section>
        <div class="">
            <img src="https://upload-images.jianshu.io/upload_images/3424642-4db5ec639d0eb348.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" style="width: 100%">
        </div>
    </section>

</header>

<!-- 正文 -->
<main>

    <div class="container-fluid mb-5">

        <!-- 文章 -->
        <div class="row justify-content-around" style="margin-top: -100px;">

            <!--Grid column-->
            <div class="col-md-10 px-lg-5">
                <!--Card-->
                <div class="card pb-5 mx-md-3">
                    <div class="card-body">

                        <div class="container">

                            <!--Section heading-->
                            <h1 class="section-heading h1 pt-4 mb-3">
                                <strong th:text="${article.title}"></strong>
                            </h1>

                            <div class="row">
                                <div class="col-md-12 col-xl-12 d-flex justify-content-center">
                                    <p class="font-small dark-grey-text mb-1">
                                        <strong>作者：</strong> [[${article.authorName}]]</p>
                                    <p class="font-small grey-text mb-0 ml-3">
                                        <i class="fa fa-clock-o dark-grey-text"></i> [[${article.updateTime}]] </p>
                                </div>
                            </div>

                            <!--Grid row-->
                            <div class="row fmt row pt-lg-5 pt-3">

                                <!--Grid column-->
                                <div class="col-md-12 col-xl-12" th:utext="${article.content}">

                                </div>

                                <!--/Grid column-->

                            </div>
                            <!--/Grid row-->

                            <div class="row my-5">

                                <!--Grid column-->
                                <div class="col-md-12 text-center">

                                    <button type="button" class="btn peach-gradient btn-rounded waves-effect waves-light">
                                        <i class="fa fa-facebook left"></i> 分享</button>
                                    <!--Twitter-->
                                    <button type="button" class="btn blue-gradient btn-rounded waves-effect waves-light">
                                        <i class="fa fa-cny left"></i> 打赏</button>
                                    <!--Google +-->
                                    <a type="button" class="btn purple-gradient btn-rounded waves-effect waves-light" href="#commentSection">
                                        <i class="fa fa-comments-o left"></i> 评论</a>

                                </div>
                                <!--Grid column-->

                            </div>

                            <hr class="mt-5">

                            <section>

                                <!--Main wrapper-->
                                <div class="comments-list text-center text-md-left">
                                    <div class="section-heading mt-5 mb-5">
                                        <h4 class="font-weight-bold mt-5 mb-5 text-center">
                                            <strong>评论</strong>
                                        </h4>
                                    </div>
                                    <!--First row-->
                                    <!--<div class="row mb-4">-->
                                        <!--&lt;!&ndash;Image column&ndash;&gt;-->
                                        <!--<div class="col-sm-2 col-12 mb-md-0 mb-3">-->
                                            <!--<img src="https://mdbootstrap.com/img/Photos/Avatars/img (8).jpg" class="avatar rounded-circle z-depth-1-half">-->
                                        <!--</div>-->
                                        <!--&lt;!&ndash;/.Image column&ndash;&gt;-->
                                        <!--&lt;!&ndash;Content column&ndash;&gt;-->
                                        <!--<div class="col-sm-10 col-12">-->
                                            <!--<a>-->
                                                <!--<h4 class="font-weight-bold">Tom Smith</h4>-->
                                            <!--</a>-->
                                            <!--<div class="mt-2">-->
                                                <!--<ul class="list-unstyled ">-->
                                                    <!--<li class="comment-date">-->
                                                        <!--<i class="fa fa-clock-o"></i> 05/10/2015</li>-->
                                                <!--</ul>-->
                                            <!--</div>-->
                                            <!--<p class="grey-text">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis-->
                                                <!--aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur-->
                                                <!--sint occaecat cupidatat non proident.</p>-->
                                        <!--</div>-->
                                        <!--&lt;!&ndash;/.Content column&ndash;&gt;-->
                                    <!--</div>-->
                                    <!--/.First row-->
                                </div>
                                <!--/.Main wrapper-->

                            </section>

                            <section class="mb-4 wow fadeIn" data-wow-delay="0.2s" style="visibility: visible; animation-name: fadeIn; animation-delay: 0.2s;" id="commentSection">

                                <!--Grid row-->
                                <div class="row">

                                    <!--Grid column-->
                                    <div class="col-lg-6 col-md-6 mb-3">

                                        <div class="input-group md-form form-sm form-3 pl-0">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text white black-text" id="basic-addon8">昵称</span>
                                            </div>
                                            <input type="text" class="form-control mt-0 black-border rgba-white-strong" placeholder="Name" aria-describedby="basic-addon9">
                                        </div>

                                    </div>
                                    <!--Grid column-->

                                    <!--Grid column-->
                                    <div class="col-lg-6 col-md-6 mb-3">

                                        <div class="input-group md-form form-sm form-3 pl-0">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text white black-text" id="basic-addon9">邮箱</span>
                                            </div>
                                            <input type="text" class="form-control mt-0 black-border rgba-white-strong" placeholder="Email" aria-describedby="basic-addon9">
                                        </div>

                                    </div>
                                    <!--Grid column-->

                                </div>
                                <!--Grid row-->

                                <!--Grid row-->
                                <div class="row">

                                    <div class="col-12 mt-1">
                                        <div class="form-group basic-textarea rounded-corners shadow-textarea">

                                            <textarea class="form-control" id="exampleFormControlTextarea6" rows="5" placeholder="评论内容..."></textarea>
                                        </div>

                                        <div class="text-right">
                                            <button class="btn pink-gradient btn-rounded waves-effect waves-light disabled">提交评论</button>
                                        </div>

                                    </div>

                                </div>
                                <!--Grid row-->

                            </section>


                        </div>
                        <!--Grid column-->

                    </div>
                    <!--Grid row-->

                </div>
                <!--/Card-->

            </div>
            <!--/Grid column-->

        </div>
        <!-- /文章 -->
    </div>

</main>
<!-- /正文 -->

<!-- 网站底部 -->
<footer th:replace="~{common :: footer}"></footer>
<!-- /网站底部 -->

<!-- JQuery -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script src="https://cdn.bootcss.com/mdbootstrap/4.5.0/js/mdb.min.js"></script>
<script>
    //Animation init
    new WOW().init();
</script>

</body>
</html>